<script setup lang="ts">
import ActivitInfo from "@/components/Activit/activitInfo.vue";
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { UserStore } from "@/store";
import { showSuccessToast } from "vant";
import copy from "copy-to-clipboard";
import HomeShare from "@/image/new_img/activity/home_share_share.png";
import FaceBooK from "@/image/new_img/activity/facebook_cai.svg";
import WhatsApp from "@/image/new_img/activity/Whatsapp_cai.svg";
import Telegram from "@/image/new_img/activity/Telegram_cai.svg";
import Instagram from "@/image/new_img/activity/insgram_cai.svg";
import kwai from "@/image/new_img/activity/kwai_cai.svg";
import Twitter from "@/image/new_img/activity/twitter_cai.svg";
import TikTok from "@/image/new_img/activity/TikTok_cai.svg";
import Youtube from "@/image/new_img/activity/Youtube_cai.svg";
import { FiltrationFun } from "@/utils";

const userStore = UserStore();
const { t } = useI18n();
const shareList = ref([
  { img: HomeShare, name: "Mais" },
  { img: FaceBooK, name: "Facebook" },
  { img: WhatsApp, name: "WhatsApp" },
  { img: Telegram, name: "Telegram" },
  { img: Instagram, name: "Instagram" },
  { img: kwai, name: "Kwai" },
  { img: Twitter, name: "Twitter" },
  { img: TikTok, name: "TikTok" },
  { img: Youtube, name: "Youtube" },
]);

const httpUrl = ref("");
const configList: any = ref([]);
const shareData: any = ref({
  shareContent: "",
  sharePicture: "",
});
onMounted(() => {
  const currentUrl = window.location.href;
  const index = currentUrl.indexOf("#");
  if (index !== -1) {
    // 截取从 0 开始到指定字符串下标的部分
    httpUrl.value = currentUrl.substring(0, index);
    httpUrl.value = userStore.isLogin
      ? httpUrl.value + `?a=${userStore.userLoginInfo.account.linkId}`
      : httpUrl.value;
  }
  FiltrationFun.getconfig(6).then(res => {
    configList.value = res;
  });
  shareData.value = FiltrationFun.getWebsiteShareConfig();
});
const copylink = () => {
  copy(httpUrl.value);
  showSuccessToast(t("tip.wasCopied"));
};
//分享平台
const shareShareTerrace = item => {
  const data = {
    name: item.name,
    title: "br11.com",
    text: shareData.value.shareContent,
    url: httpUrl.value, // 可选分享的链接
  };
  FiltrationFun.shareTerrace(data);
};
</script>
<template>
  <div class="invitation-frame">
    <div class="link-frame">
      <div class="link-title-frame">{{ t("activity.distriAgent.myLink") }}:</div>
      <div class="link-text-frame df ai-center jc-space-between">
        <div class="link-text">
          {{ httpUrl }}
        </div>
        <img src="@/image/new_img/activity/afiliado_botao_Copia.png" @click="copylink" />
      </div>
      <div class="share-frame">
        <div class="share-div-frame">{{ t("activity.distriAgent.sharing") }}</div>
        <div class="share-list-frame df ai-center">
          <div
            class="share-content"
            v-for="(item, index) in shareList"
            :key="index"
            @click="shareShareTerrace(item)"
          >
            <img :src="item.img" />
            <div class="step-name">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="act-info-img-frame">
      <div class="act-info-title">{{ t("activity.distriAgent.subtitle") }}</div>
      <img src="@/image/new_img/activity/afiliado.png" />
    </div>
    <!-- 列表 -->
    <div class="list-frame">
      <div class="list-content-frame">
        <div class="top-title-frame df">
          <!-- <div
            class="list-title-frame df ai-center jc-center"
            :class="{ 'select-title': selectType == 1 }"
            @click="selectType = 0"
          >
            <img class="title-img" src="@/image/new_img/activity/quanxianzhuanyi_bai.png" />
            {{ t("activity.distriAgent.directCommissions") }}
          </div>
          <div class="interval"></div> -->
          <div class="list-title-frame df ai-center">
            <img class="title-img-frame" src="@/image/new_img/activity/qun_bai.png" />
            {{ t("activity.distriAgent.teamCommission") }}
          </div>
        </div>
        <div class="list-conten">
          <div class="title-content-frame df ai-center">
            <div class="one-div-frame df ai-center jc-center">
              {{ t("activity.distriAgent.level") }}
            </div>
            <div class="two-div-frame df ai-center jc-center">
              {{ t("activity.distriAgent.teamRollover") }}
            </div>
            <div class="three-div-frame df ai-center jc-center">
              {{ t("activity.distriAgent.proportion") }}
            </div>
          </div>
          <div class="list-val-frame df fw-wrap">
            <div
              v-for="(item, index) in configList"
              :key="index"
              class="list-title df"
              :class="{ oushu: (index + 1) % 2 == 0 }"
            >
              <div class="one-level list-title-name colortext">
                {{ item.ActUnlimitedAgentConfig.grade }}
              </div>
              <div class="tew-frame tew-frame1 list-title-name colortext">
                {{ FiltrationFun.formatNumber(item.ActUnlimitedAgentConfig.damaNeeds / 100) }}
              </div>
              <div class="tew-frame list-title-name colortext">
                {{ item.ActUnlimitedAgentConfig.commissionRate / 1000 }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <ActivitInfo :actType="6" :title="t('activity.eventDescription')" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.invitation-frame {
  width: 100%;
  height: auto;
  margin: auto;

  .link-frame {
    width: 100%;
    height: 334px;
    background-image: linear-gradient(to right, #cd80ff 10%, #8198ff 90%);
    border-radius: 30px;
    border: 3px solid #fff4df;
    margin-top: 46px;

    .link-title-frame {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
      margin-top: 18px;
      margin-left: 33px;
    }

    .link-text-frame {
      width: calc(100% - 66px);
      margin: auto;
      height: 100px;
      background: rgba(0, 0, 0, 0.65);
      border-radius: 28.996px;
      margin-top: 16px;

      .link-text {
        margin-left: 21px;
        color: rgba(255, 255, 255, 0.65);
        font-size: 21px;
      }

      img {
        width: 133px;
        height: 83px;
        margin-right: 8px;
      }
    }
  }

  .act-info-img-frame {
    width: 100%;
    border-radius: 28.998px;
    background-color: #3b2d43;
    margin-top: 15px;
    height: 634px;

    .act-info-title {
      width: 100%;
      color: #d17fff;
      text-align: center;
      font-size: 28px;
      padding-top: 29px;
      margin-bottom: 20px;
      font-weight: 700;
    }

    img {
      width: 100%;
      height: auto;
    }
  }

  .list-frame {
    width: 100%;
    height: auto;
    border-radius: 29px;
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .list-conten {
    width: 100%;
    height: auto;
    border-radius: 29px;
    margin-top: 15px;
    font-size: 21px;
    .title-content-frame {
      width: 100%;
      height: 58px;
      background-color: rgba(255, 255, 255, 0.08);
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      color: rgba(255, 255, 255, 0.85);
      .one-div-frame {
        width: 82.375px;
        height: 33px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }
      .two-div-frame {
        width: 281.391px;
        height: 33px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }
      .three-div-frame {
        flex: 1;
        height: 33px;
      }
    }
    .list-title {
      width: 100%;
      height: auto;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      .list-title-name {
        font-size: 22px;
        color: rgba(255, 255, 255, 0.65);
        text-align: center;
        line-height: 57.9844px;
      }

      .one-level {
        width: 100px;
        height: 57.98px;
      }

      .tew-frame {
        flex: 1;
        height: 57.98px;
        margin-left: 4px;
      }
    }
    .oushu {
      background-color: rgba(255, 255, 255, 0.04);
    }
  }
}

.list-content-frame {
  width: calc(100% - 58px);
  height: auto;
  margin: auto;
  padding-bottom: 20px;
  .top-title-frame {
    width: 100%;
    height: auto;
    .list-title-frame {
      width: 100%;
      height: 82px;
      border-radius: 15px;
      background-image: linear-gradient(105deg, #d17fff 0%, #7f99ff 100%);
      margin-top: 34px;
      color: #ffffff;
      font-size: 24px;
      padding-left: 34px;
      img {
        width: 34px;
        height: 34px;
      }
      .title-img-frame {
        width: 34px;
        height: 34px;
        margin-right: 10px;
      }
    }
    .select-title {
      background-image: linear-gradient(
        105deg,
        rgba(209, 127, 255, 0.25) 0%,
        rgba(127, 153, 255, 0.25) 100%
      );
      color: rgba(255, 255, 255, 0.65);
    }
  }
}
.interval {
  width: 10px;
  height: 100%;
}
.list-val-frame {
  width: 100%;
  height: auto;
  background-color: #33243b;
}
.share-div-frame {
  font-size: 26px;
  color: #ffffff;
  height: 46px;
  line-height: 46px;
  text-align: center;
  margin-top: 8px;
}
.share-list-frame {
  width: 95%;
  margin: auto;
  height: auto;
  margin-top: 8px;
  overflow-x: scroll;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .share-content {
    width: auto;
    height: auto;
    margin-left: 16px;
    text-align: center;

    img {
      width: 50px;
      height: 50px;
    }
    .step-name {
      font-size: 24px;
      color: #ffffffa6;
    }
  }
}
</style>
